<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			物业管理
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-community-line" style="color:#999;font-size:16px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="community-line"></i-icon> -->
				物业列表
			</view>
			<button class="r30" type="button" @click="addNode()">
				<i class="ri-add-circle-fill" style="color:#fff;font-size:12px;"></i>
				<!-- <i-icon size="20upx" color="#FFF" name="add-circle-fill"></i-icon> -->
				添加物业
			</button>
		</view>
		<view class="p-table">
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th>id</th>
					<th>物业名称</th>
					<th>管理员</th>
					<th>手机号</th>
					<th>密码</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in tree" v-if="item.state == '正常'">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.adminName}}</td>
					<td>{{item.phone}}</td>
					<td>{{item.password}}</td>
					<td class="bz">
						<button @click="editNode(item)" class="r10">
							<i class="ri-pencil-fill" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#FFF" name="pencil-fill"></i-icon> -->
							编辑
						</button>
						<button class="b-dell" @click="delNode(item)">
							<i class="ri-delete-bin-line" style="color:#333;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#333" name="delete-bin-line"></i-icon> -->
							删除
						</button>
					</td>
				</tr>
			</table>
			<view class="bz">
				<Pagination :total="total" :pageSize="size" :nowPage="current" @change="alterCurrent">
				</Pagination>
			</view>
		</view>
		<view v-if="add" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk" style="width:500px;">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color:#7800BE;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="add-circle-fill" class="r10"></i-icon> -->
						添加物业
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:16px;" @click="add=false"></i>
					<!-- <i-icon size="30upx" color="#f73164" name="close-circle-fill" @click="add=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz" style="width: 100px;">物业名称</view>
						<view class="nr"><input type="text" v-model="node.name" /></view>
					</view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">管理员</view>
						<view class="nr"><input type="text" v-model="node.adminName" /></view>
					</view>
					<view style="margin-bottom: 30px;"></view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">手机号码</view>
						<view class="nr"><input type="text" v-model="node.phone" maxlength="11" /></view>
					</view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">登录密码</view>
						<view class="nr"><input type="text" v-model="node.password" maxlength="15" /></view>
					</view>
					<view class="bc" style="margin-left: 120px;margin-top: 30px;">
						<button type="button" @click="addNode(true)" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="edit" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk" style="width: 600px;">
				<view class="tb">
					<view class="titem">
						<i class="ri-settings-line" style="color:#7800BE;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="settings-line" class="r10"></i-icon> -->
						编辑物业
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:16px;" @click="edit=false"></i>
					<!-- <i-icon size="30upx" color="#f73164" name="close-circle-fill" @click="edit=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz" style="width: 100px;">物业名称</view>
						<view class="nr"><input type="text" v-model="node.name" :value="node.name" /></view>
					</view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">管理员</view>
						<view class="nr"><input type="text" v-model="node.adminName" :value="node.admin" /></view>
					</view>
					<view style="margin-bottom: 30px;"></view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">手机号码</view>
						<view class="nr"><input type="text" v-model="node.phone" maxlength="11" /></view>
					</view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">登录密码</view>
						<view class="nr"><input type="text" v-model="node.password" /></view>
					</view>
					<view class="bc" style="margin-left: 120px;margin-top: 30px;">
						<button type="button" @click="editNode(null,true)" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Pagination from "@/components/pagination.vue"
	export default {
		components: {
			Pagination
		},
		data() {
			return {
				tree: [],
				node: {},
				pages: 0,
				total: 0,
				current: 1,
				size: 10,
				add: false,
				edit: false,
				delById: ''
			}
		},
		methods: {
			alterCurrent: function(c) {
				if (c) {
					if (c <= this.pages && c >= 1) {
						this.current = c;
						this.init()
					}
				}
			},
			init: function() {
				let _this = this;
				uni.request({
					url: this.baseURL + '/property/list?current=' + this.current + '&size=' + this.size,
					method: 'GET',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: function(res) {
						let data = res.data;
						if (data.code === 0 || data.success == true) {
							data = data.data;
							_this.tree = data.records
							_this.pages = data.pages
							_this.total = data.total
							_this.current = data.current
							_this.size = data.size
						} else {
							uni.showToast({
								title: data.msg || data.message,
								icon: 'error',
								duration: 3000
							})
						}
					}
				});
			},
			addNode: function(_add) {
				if (_add !== true) {
					this.node = {
						name: '',
						adminName: '',
						phone: '',
						password: ''
					}
					this.add = true
				} else {
					let _this = this;
					this.httpRequest({
						url: '/property/add',
						method: 'POST',
						data: _this.node,
						fn(data) {
							uni.showToast({
								title: '添加成功',
								icon: 'success',
								duration: 2000
							})
							_this.add = false
							_this.init()
							// uni.request({
							// 	url:_this.heguiURL+"/sign/gm",
							// 	method:'POST',
							// 	data:{
							// 		"phone":_this.node.phone,
							// 		"role":'PROPERTY'
							// 	},
							// 	success(res) {
							// 		if(res.data.success == true){

							// 		}else{
							// 			uni.showToast({
							// 				title: '添加物业失败',
							// 				icon:'error',
							// 				duration:2000
							// 			})
							// 		}
							// 	},
							// 	fail(err) {
							// 		console.log(err)
							// 		uni.showToast({
							// 			title: '添加异常，请稍后重试',
							// 			icon:'error',
							// 			duration:2000
							// 		})
							// 	}
							// })
						}
					})
				}
			},
			editNode(item, _edit) {
				if (_edit !== true) {
					this.node = item
					this.edit = true
				} else {
					let _this = this
					this.httpRequest({
						url: '/property/edit',
						method: 'PUT',
						data: _this.node,
						fn(data) {
							uni.showToast({
								title: '修改成功'
							})
							_this.edit = false
							_this.init()
						}
					})
				}
			},
			delNode: function(item) {
				let _this = this
				uni.showModal({
					content: '确认要删除\"' + item.name + '\"吗？',
					success: function(res) {
						if (res.confirm) {
							_this.httpRequest({
								url: '/property/delete?wuyeId=' + item.id,
								method: 'DELETE',
								fn(data) {
									uni.showToast({
										title: '删除成功'
									})
									_this.init()
								}
							})
						}
					}
				})
			},
			toStation() {
				uni.navigateTo({
					url: ''
				})
			}
		},
		onLoad: function() {
			this.init()
		}
	}
</script>
<style>
	td {
		text-align: center;
	}
</style>
